<template>
  <div class="duty_absent">
    <div class="duty_absent_title">
      <div class="duty_title_left">
        <van-dropdown-menu>
          <van-dropdown-item v-model="yearData" :options="yearOptions" @change="yearChange" />
          <van-dropdown-item v-model="monthData" :options="monthOptions" @change="monthChange" />
        </van-dropdown-menu>
      </div>
      <div class="duty_title_right" @click="chooseOP">
        <span>{{ orgPerson || '部门/人员' }}</span>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <div class="absent_main">
      <div class="absent_record">
        <div class="absent_box" v-if="listDate.length > 0">
          <div class="absent_info_one" v-for="oneInfo in listDate" :key="oneInfo.id">
            <div class="one_indo_title">
              <span class="boder_circle"></span>
              {{ oneInfo.orgName }}-{{ oneInfo.userName }}
            </div>
            <div class="ones_duty">
              <div v-for="twoInfo in oneInfo.neglectList" :key="twoInfo.id">
                <van-swipe-cell :disabled="!isAdd">
                  <div class="infos_one_absent" @click="goDetail(twoInfo)">
                    <p>{{ timeFun(twoInfo.startTime) }}-{{ timeFun(twoInfo.endTime) }}</p>
                    <p class="absent_status extra">
                      <span class="detail">旷工 {{ twoInfo.days }}天/{{ twoInfo.hours }}小时</span>
                    </p>
                  </div>
                  <template #right>
                    <van-button square type="danger" text="删除" @click="del(twoInfo)" />
                  </template>
                </van-swipe-cell>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
    </div>

    <!-- 底部保存按钮 -->
    <div class="addNew" @click="goToAdd" v-if="isAdd">
      <img src="@/assets/images/common/add_new.png" alt="" />
    </div>

    <van-popup v-model="cascaderShow" round position="bottom" class="cascader_pop">
      <filter-person
        v-if="cascaderShow"
        :cascaderOneList="cascaderOneList"
        :confirmInfo="confirmInfo"
        @cancle="cascaderShow = false"
        @confirm="peopleChooseConfirm"></filter-person>
    </van-popup>
  </div>
</template>

<script>
import { getDataPermissions, getSearchTimeList, getNeglectListApp, delNeglectRecord } from '@api/api-attendance.js'
import FilterPerson from '@com/FilterPerson'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'DutyAbsent',
  components: {
    FilterPerson,
  },
  data() {
    return {
      moment: moment,

      listDate: [],
      orgOptions: [],
      orgPerson: '',
      cascaderShow: false,
      cascaderOneList: [],
      confirmInfo: {
        oneInfo: {},
        secInfo: {},
        secList: [],
      },
      orgId: '',
      yearData: '',
      monthData: '',
      yearOptions: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      monthOptions: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      buttonList: [],
      isAdd: false,
    }
  },
  created() {
    this.$buttonAuth.getButtonList('APPW_ATTEN_ABSENTEEISM').then(data => {
      this.buttonList = data
      this.isAdd = this.$buttonAuth.hasPer(this.buttonList, 'APPW_ABSENTEEISM_ADD')
      if (this.isAdd) {
        this.orgId = JSON.parse(localStorage.userInfo).loginPostInfo.orgId
      }
      this.getSearchTimeList()
      this.getDataPermissions()
    })
  },
  mounted() {},
  methods: {
    //获取部门列表
    getOrgTable() {
      const param = {
        year: String(this.yearData),
        month: String(this.monthData),
        orgId: this.orgId,
        userId: this.confirmInfo.secInfo.userId || '',
      }
      getNeglectListApp(param).then(res => {
        if (res.status === 200) {
          this.listDate = res.data
        }
      })
    },
    getDataPermissions() {
      getDataPermissions({
        type: '2',
      }).then(res => {
        if (res.status === 200) {
          this.orgOptions = res.data
          this.cascaderOneList = this.orgOptions
          if (this.$route.query.orgId) {
            this.getOrg(this.$route.query.orgId)
          }
        }
      })
    },
    chooseOP() {
      this.cascaderShow = true
    },
    goDetail(info) {
      if (!this.isAdd) return
      this.$router.push({
        path: '/addAbsent',
        query: {
          id: info.id,
          year: this.yearOptions[this.yearOptions.length - 1].value,
        },
      })
    },
    getOrg(id) {
      for (let i = 0; i < this.orgOptions.length; i++) {
        let eli = this.orgOptions[i]
        if (eli.orgId === id) {
          this.orgPerson = eli.orgName
          this.confirmInfo = {
            oneInfo: eli,
            secInfo: '',
            thrInfo: {},
            secList: eli.userList,
            thrList: [],
          }
          break
        }
      }
    },
    getSearchTimeList() {
      getSearchTimeList().then(res => {
        if (res.status === 200) {
          this.timeList = res.data
          const arr = []
          res.data.forEach(item => {
            const arr2 = []
            if (item.monthList.length) {
              item.monthList.forEach(li => {
                arr2.push({
                  text: li.month + '月',
                  value: li.month,
                  isChoose: li.isChoose,
                })
              })
            }
            arr.push({
              text: item.year + '年',
              value: item.year,
              isChoose: item.isChoose,
              monthList: [{ text: '全部', value: '' }, ...arr2],
            })
          })
          this.yearOptions = arr
          const arr1 = arr.filter(item => {
            return item.isChoose
          })
          this.yearData = arr1[0].value
          this.monthOptions = arr1[0].monthList
          const arr3 = this.monthOptions.filter(item => {
            return item.isChoose
          })
          this.monthData = arr3[0].value
          this.getData()
        }
      })
    },
    yearChange() {
      const arr = this.yearOptions.filter(item => {
        return item.value === this.yearData
      })
      this.monthOptions = arr[0].monthList
      const arr3 = this.monthOptions.filter(item => {
        return item.isChoose
      })
      this.monthData = arr3[0].value
      this.getData()
    },
    monthChange() {
      console.log(this.monthData)
      this.getData()
    },
    goToAdd() {
      this.$router.push({
        path: '/addAbsent',
        query: {
          year: this.yearOptions[this.yearOptions.length - 1].value,
        },
      })
    },
    timeFun(time) {
      if (time) {
        const arr = time.split(' ')
        const arr1 = arr[0].split('-')
        const str = arr1[1] + '月' + arr1[2] + '日' + ' ' + arr[1]
        return str
      } else {
        return ''
      }
    },
    del(row) {
      this.$dialog
        .confirm({
          message: '确定要删除该条数据吗？',
        })
        .then(() => {
          delNeglectRecord({
            id: row.id,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('删除成功')
              this.getData()
            }
          })
        })
        .catch(() => {})
    },
    getData() {
      this.getOrgTable()
    },
    peopleChooseConfirm(data) {
      this.confirmInfo = data
      let strOne = data.oneInfo.orgName ? data.oneInfo.orgName : '',
        strSec = data.secInfo.userName ? data.secInfo.userName : ''
      this.orgPerson = strSec ? strSec : strOne
      let orgId = ''
      if (strOne) {
        orgId = data.oneInfo.orgId
      }
      this.orgId = orgId
      this.getOrgTable()
      this.cascaderShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
.duty_absent {
  font-size: 12px;
  /deep/ .van-popup {
    position: absolute;
  }
  /deep/.van-dropdown-menu__bar {
    height: 36px;
    box-shadow: none;
  }
  .duty_absent_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    .duty_title_left {
      width: 50%;
    }
    .duty_title_right {
      width: 40%;
      font-size: 13px;
      color: #333;
      text-align: center;
      overflow: hidden;
      display: flex;
      align-items: center;
      span {
        width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .absent_main {
    .absent_main_title {
      font-weight: bold;
      font-size: 13px;
    }
    .absent_record {
      padding: 0 15px 10px;
    }
    .absent_box {
      color: #333;
      .absent_info_one {
        margin-top: 9px;
      }
      .one_indo_title {
        direction: flex;
        align-items: center;
        height: 20px;
      }
      .ones_duty {
        border-bottom: 1px solid #efefef;
      }
      .infos_one_absent {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // height: 25px;
        background-color: #f7f7f7;
        margin-bottom: 10px;
        padding: 5px;
        p {
          line-height: 20px;
          padding-left: 5px;
        }
      }
      .boder_circle {
        height: 7px;
        width: 7px;
        border-radius: 50%;
        background-color: #942733;
        display: inline-block;
      }
      .absent_status {
        color: #ff0000;
      }
      .extra {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .desc {
          color: #7f7f7f;
          font-size: 12px;
        }
      }
    }
    // 周期切换
    .tab_con_tabs {
      display: flex;
      align-items: center;
      padding: 8px 8px;
      border-bottom: 1px solid #efefef;
      // flex-wrap: wrap;
      // overflow-x: auto;
      overflow-x: scroll;
      word-break: keep-all;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        border-radius: 1px;
      }
      .tab_li {
        font-size: 12px;
        color: #333333;
        border-radius: 2px;
        padding: 4px 8px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-right: 5px;
        &.active {
          background-color: #f4f6f8;
          font-weight: bold;
        }
        .li_name {
          font-size: 12px;
        }
      }
    }
  }
}
.cascader_pop {
  display: flex;
  flex-direction: column;
  height: 60%;
  overflow: hidden;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    // font-size: 14px;
    background-color: #f5f6fa;
    .title {
      font-size: 16px;
      color: #333;
    }
  }
  .cascader {
    display: flex;
    justify-content: space-around;
    flex: 1;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    padding-bottom: 10px;
    .one,
    .sec,
    .thr {
      flex: 1;
      overflow-y: auto;
    }
    .group {
      border-right: 1px solid #ccc;
    }
    .li {
      padding: 6px 12px;
    }
    .li_choose {
      color: #e1af54;
    }
  }
}
.addNew {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  width: 48px;
  height: 48px;
  img {
    width: 100%;
    opacity: 0.7;
  }
}
</style>
